{block title}Seznam videí{/block}
{block description}{/block}
{block keywords}{/block}
{block header}{/block}

{block script}
<script type="text/javascript" src="{$basePath}/www/libs/js/angular/angular.js"></script>
<script type="text/javascript" src="{$basePath}/www/libs/js/angular/angular-resource.js"></script>

<script type="text/javascript" src="{$basePath}/www/modules/front/js/angular-lessons/app.js"></script>
<script type="text/javascript" src="{$basePath}/www/modules/front/js/angular-lessons/controllers.js"></script>
<script type="text/javascript" src="{$basePath}/www/modules/front/js/angular-lessons/filters.js"></script>
<script type="text/javascript" src="{$basePath}/www/modules/front/js/angular-lessons/services.js"></script>
{/block}

{block content}    
<div id="mainLoader" class="contentLoader">
  <div>loading</div>
</div>
<div ng-controller="LessonsController" ng-init="lessonsLink = '{link getLessons!}'; thisPageUrl = '{plink //Lessons:list}';initController();" style="position:relative;">
<!-- loader -->
  
<!--main lesson menu--> 
  <div class="col-sm-8 col-md-7 lessons-menu">
    <div class="row menu">
      <div class="col-sm-4 menu-field" ng-class="{ active:learnActive }" ng-click="switchToLearnLine();setLocation()" Title="řadit podle učící křivky">postupně</div>
      <div class="col-sm-4 menu-field" ng-class="{ active:categoryActive }" ng-click="switchToCategory();setLocation()" Title="řadit po sekcích">po&nbsp;kategoriích</div>
      <div class="col-sm-4 menu-field" ng-class="{ active:styleActive }" ng-click="switchToStyle();setLocation()" Title="řadit podle stylu">podle&nbsp;stylu</div>
    </div>
  </div>
  
<!--lesson learn line menu--> 
  <div class="col-sm-12 submenu-container" ng-class="{ invisible:learnMenuInvisible }">
    <div class="submenu-categories"><a class="active">&nbsp;</a></div>
    <div class="submenu-filters row">
      <div class="col-md-2">
        <input type="text" ng-model="searchQuery">
      </div>
      <div class="col-md-10 filters">
        <a href="" ng-class="{ active:allLevelActive }" ng-click="selectLevel('all');setLocation()">Všechny&nbsp;levely</a>
        <a href="" ng-class="{ active:zeroLevelActive }" ng-click="selectLevel('0');setLocation()">Level&nbsp;0</a>
        <a href="" ng-class="{ active:firstLevelActive }" ng-click="selectLevel('1');setLocation()">Level&nbsp;1</a>
        <a href="" ng-class="{ active:secondLevelActive }" ng-click="selectLevel('2');setLocation()">Level&nbsp;2</a>
      </div>
    </div>
  </div>

 <!--lesson category menu--> 
  <div class="col-sm-12 submenu-container" ng-class="{ invisible:categoryMenuInvisible }">
      <div class="submenu-categories">
        <a href="" class="category-action" ng-click="lessonCategory = 'zacatek'; addAction($event);setLocation()">Začátek</a>
        <a href="" class="category-action" ng-click="lessonCategory = 'akordy'; addAction($event);setLocation()">Akordy</a>
        <a href="" class="category-action" ng-click="lessonCategory = 'doprovody'; addAction($event);setLocation()">Doprovody</a>
        <a href="" class="category-action" ng-click="lessonCategory = 'technika'; addAction($event);setLocation()">Technika</a>
        <a href="" class="category-action" ng-click="lessonCategory = 'stupnice';addAction($event);setLocation()">Stupnice</a>
        <a href="" class="category-action" ng-click="lessonCategory = 'rytmus';addAction($event);setLocation()">Rytmus</a>
        <a href="" class="category-action" ng-click="lessonCategory = 'pisnicky';addAction($event);setLocation()">Písničky</a>
        <a href="" class="category-action" ng-click="lessonCategory = 'licky';addAction($event);setLocation()">Licky</a>
      </div>
    
      <div class="submenu-filters row">
        <div class="col-md-2">
          <input type="text" ng-model="searchQuery">
        </div>
        <div class="col-md-10 filters">
          <a href="" ng-class="{ active:titleSortActive }" ng-click="titleSort();setLocation()">Podle&nbsp;názvu</a>
          <a href="" ng-class="{ active:viewSortActive }" ng-click="viewSort();setLocation()">Podle&nbsp;shlédnutí</a>
          <a href="" ng-class="{ active:allLevelActive }" ng-click="selectLevel('all');setLocation()">Všechny&nbsp;levely</a>
          <a href="" ng-class="{ active:zeroLevelActive }" ng-click="selectLevel('0');setLocation()">Level&nbsp;0</a>
          <a href="" ng-class="{ active:firstLevelActive }" ng-click="selectLevel('1');setLocation()">Level&nbsp;1</a>
          <a href="" ng-class="{ active:secondLevelActive }" ng-click="selectLevel('2');setLocation()">Level&nbsp;2</a>
        </div>
      </div>
    </div>

<!-- lesson style menu -->
    <div class="col-sm-12 submenu-container" ng-class="{ invisible:styleMenuInvisible }" class="style-menu">
      <div class="submenu-categories">
        <a href="" class="style-action" ng-click="lessonStyle = 'rock';addAction($event);setLocation()">Rock</a>
        <a href="" class="style-action" ng-click="lessonStyle = 'folk';addAction($event);setLocation()">Folk</a>
        <a href="" class="style-action" ng-click="lessonStyle = 'pop';addAction($event);setLocation()">Pop</a>
      </div>
      
      <div class="submenu-filters row">
        <div class="col-md-2">
          <input type="text" ng-model="searchQuery">
        </div>
        <div class="col-md-10 filters"> 
          <a href="" ng-class="{ active:titleSortActive }"  ng-click="titleSort();setLocation()">Podle&nbsp;názvu</a>
          <a href="" ng-class="{ active:viewSortActive }"  ng-click="viewSort();setLocation()">Podle&nbsp;shlédnutí</a>
          <a href="" ng-class="{ active:allLevelActive }" ng-click="selectLevel('all');setLocation()">Všechny&nbsp;levely</a>
          <a href="" ng-class="{ active:zeroLevelActive }" ng-click="selectLevel('0');setLocation()">Level&nbsp;0</a>
          <a href="" ng-class="{ active:firstLevelActive }" ng-click="selectLevel('1');setLocation()">Level&nbsp;1</a>
          <a href="" ng-class="{ active:secondLevelActive }" ng-click="selectLevel('2');setLocation()">Level&nbsp;2</a>
        </div>
      </div>
    </div>
 
<!--results--> 
  <div class="lessons-container col-sm-12">
    <div class="row">
      <div class="lesson-container" ng-repeat="lesson in lessons | categoryFilter:lessonCategory | levelFilter:lessonLevel | styleFilter:lessonStyle | orderBy:lessonOrder | filter:searchQuery | startFrom:currentPage*pageSize | limitTo:pageSize">                           
        <div class="lesson">
          <a href="{link Lessons:detail}/{{ lesson.webalize }}">
              <img ng-src="{$basePath}/content/lessons/{{ lesson.webalize }}/images/{{ lesson.webalize }}-small.jpg" width="180px" height="100px">
          </a>
          <span class="lesson-length">
            {{ lesson.duration }}
          </span>
          <a href="{link Lessons:detail}/{{ lesson.webalize }}"><h3>{{ lesson.title }}</h3></a>
          <p>
            <!--<span class="level">{{ lesson.level }}</span>-->
            <span class="styles">{{ lesson.style }}</span>
            <!--<span class="comments">100</span>-->
            <span class="views">{{ lesson.views }}</span>
          </p>   
        </div>  
      </div>
    </div>
          
    <div class="row">
      <div class="text-center">
        <div id="list-share" class="social-likes" data-counters="no" data-url="http://nanastroj.cz/lekce-kytary">
          <div class="facebook" title="Sdílejte na Facebooku">Facebook</div>
          <div class="twitter" title="Sdílejte na Twitteru">Twitter</div>
          <div class="plusone" title="Sdílejte na Google+">Google+</div>
        </div>
      </div>
      
      <div class="result">
        Nalezeno výsledků: {{ (lessons | categoryFilter:lessonCategory | levelFilter:lessonLevel | styleFilter:lessonStyle | orderBy:lessonOrder | filter:searchQuery).length }} 
      </div>
      
      {{ recalculateNumberOfPages((lessons | categoryFilter:lessonCategory | levelFilter:lessonLevel | styleFilter:lessonStyle | orderBy:lessonOrder | filter:searchQuery)) }}

      <div class="paging">
          <button class="left" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1;setLocation();"></button>
          <span>{{ currentPage+1 }}/{{ numberOfPages }}</span>
          <button class="right" ng-disabled="currentPage >= numberOfPages - 1" ng-click="currentPage=currentPage+1;setLocation();"></button>
      </div>
    </div>
  </div>





            
    
</div>
 
{/block}
